<template>
  <el-dialog
    :model-value="dialogVisible"
    :title="$t('编辑')"
    width="50%"
    center
    :destroy-on-close="true"
    @close="emits('closeDialog')"
  >
    <el-form :model="form" width="100%" ref="dialogFormRef" label-width="150">
      <el-form-item :label="$t('支付回调URL')">
        <el-input v-model="form.callback_url" :placeholder="$t('支付回调URL')" clearable />
      </el-form-item>
      <el-form-item :label="$t('支付成功URL')">
        <el-input
          v-model="form.success_url"
          :placeholder="$t('支付成功URL')"
          clearable
        />
      </el-form-item>
    </el-form>
    <div class="w-full flex justify-center mt-5">
      <el-button
        type="primary" :icon="SuccessFilled"
        :disabled="!form.callback_url"
        @click="emits('submitForm',form)"
        >{{$t('提交')}}</el-button>
        <el-button plain type="primary" :icon="Close" @click="emits('closeDialog')">{{$t('取消')}}</el-button>
    </div>
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";
import { SuccessFilled, Close } from '@element-plus/icons-vue'
const dialogFormRef = ref("");
defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
  },
  form: {
    type: Object,
    default: {
      callback_url: "",
      success_url: "",
    },
  },
});

const emits = defineEmits(["closeDialog", "submitForm"]);

</script>
